<script setup lang="ts">
import type { BasePopProps } from '~/types/types'
import { computed, onBeforeUnmount, useSlots, watch } from 'vue'

const props = withDefaults(defineProps<BasePopProps>(), {
  title: '标题',
  icon: '',
  show: true,
  showClose: true,
  showHeader: true,
  zIndex: 102,
  closeCb: () => { },
  wraperClass: '',
})
const emit = defineEmits(['update:show', 'beforeUnmount', 'close'])
const slots = useSlots()

const getIndex = computed(() => props.zIndex)

function renderContent() {
  const contentVNode = slots.default?.()
  return contentVNode
}
function close() {
  props?.closeCb()
  emit('close')
}
provide('closeDialog', close)
onBeforeUnmount(() => {
  emit('beforeUnmount')
})
watch(
  () => props.show,
  (val) => {
    if (val) {
      document.body.style.overflow = 'hidden'
    }
    else {
      document.body.style.overflow = ''
    }
  },
)
</script>

<template>
  <Transition name="slide-bottom">
    <div
      v-show="show" class="pop-overlayer" :style="{ '--bc-pop-wrapper-z-index': getIndex }"
      @click="emit('close')"
    >
      <div
        class="bg-layer3 dark:bg-layer2 pop-bottomsheet min-h-52  [&_.pop-content]:pb-0" :class="[wraperClass]"
        @click.stop
      >
        <div class="pop-title">
          {{ props.title }}
          <BaseButton type="none" class="pop-close text-[.5rem]" @click="close">
            <BaseIcon name="uni-close2" />
          </BaseButton>
        </div>
        <div class="scroll-y pop-content flex-1">
          <div class="scroll-container">
            <renderContent />
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang="scss">
:root {}
</style>

<style scoped lang="scss">
  .pop-title {
    position: absolute;
    top: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    height: 3rem;
    font-size: .875rem;
    display: flex;
    flex: none;
    color: var(--color-white);
  }
  .pop-bottomsheet,
  .pop-center {
    position: absolute;
    opacity: 1;
    display: flex;
    flex-direction: column;
    max-height: 80%;
    padding-top: 3rem;
  }
  .pop-bottomsheet {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  .pop-close {
    position: absolute;
    right: .875rem;
    top: .625rem;
    border-radius: .375rem;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--color-bg-black-6);
  }

  .pop-content {
    padding: 0 .875rem 0;
  }
$duration: .3s;

.scroll-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100% + 1px);
}

.pop-overlayer {
    transition: all $duration ease;
    position: fixed;
    inset: 0;
    touch-action: pan-x;
    overflow: hidden;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    background-color: rgba(16, 18, 18, 0.8);
    visibility: visible;
}

.bg-layer3 {
    transform: translate3d(0px, 0%, 0px);
    transition: transform $duration ease;
}

/* 入场动画 */
.slide-bottom-enter-from {
    background-color: rgba(16, 18, 18, 0);

    .bg-layer3 {
        transform: translate3d(0px, 100%, 0px);
    }
}

.slide-bottom-enter-to {
    background-color: rgba(16, 18, 18, 0.8);

    .bg-layer3 {
        transform: translate3d(0px, 0%, 0px);
    }
}

/* 离场动画 */
.slide-bottom-leave-from {
    background-color: rgba(16, 18, 18, 0.8);

    .bg-layer3 {
        transform: translate3d(0px, 0%, 0px);
    }
}

.slide-bottom-leave-to {
    background-color: rgba(16, 18, 18, 0);

    .bg-layer3 {
        transform: translate3d(0px, 100%, 0px);
    }
}
</style>
